import {deletePmGroup, selectPmGroupByPage} from '@/api/evalutaion'
import {CCard} from '@/components/card'
import {CnNormalP, CnNormalSpan} from '@/components/text'
import {useTableLoading, useTablePaging} from '@/hooks/tableHook'
import {throttle} from '@/libs/debounce'
import {toAddEvalutaion, toEditEvalutaion, toInitiateAssessment} from '@/libs/pageRedirect'
import { defineComponent, reactive, onMounted } from 'vue'

export default defineComponent({
  name: 'tableofEvaluation',
  setup(props, ctx) {
    const {loading, startLoading, closeLoading} = useTableLoading()

    const {page, changePage, size, getPagination, changeTableTotal} = useTablePaging({
      page: 1,
      size: 10
    })

    let state = reactive<{
      pmGroupName: string
      dataSource: Evaluation.TableData[]
    }>({
      pmGroupName: '',
      dataSource: []
    })
    const tableColumns: CColumn<Evaluation.TableData>[] = [
      {
        title: '名称',
        dataIndex: 'pmGroupName'
      },
      {
        title: '参与人数',
        dataIndex: 'partakeCount'
      },
      {
        title: '周期类型',
        dataIndex: 'pmPeriodName'
      },
      {
        title: '操作',
        dataIndex: 'utils',
        width: 200
      }
    ]

    function getPageData() {
      getTableData()
    }

    function getTableData() {
      startLoading()
      selectPmGroupByPage({
        page: page.value,
        size: size.value,
        pmGroupName: state.pmGroupName
      })
        .then(res => {
          state.dataSource = res.data.list
          changeTableTotal(res.data.total)
          closeLoading()
        })
        .catch(err => {
          closeLoading()
        })
    }

    const searchInput = throttle(() => {
      if (page.value !== 1) {
        changePage(1)
      }
      getTableData()
    }, 300)

    function handleTableEditClick(record: Evaluation.TableData) {
      toEditEvalutaion({pmGroupId: record.pmGroupId})
    }

    function handleTableDelClick(record: Evaluation.TableData) {
      deletePmGroup({
        pmGroupId: record.pmGroupId
      })
        .then(res => {
          getPageData()
        })
        .catch(err => {})
    }

    onMounted(() => {
      getPageData()
    })
    return () => (
      <CCard title='考评组' showTitle={false} class='CBC-bg-toRight'>
        {/*1. 卡片头部 */}
        <div class='flex items-center justify-between mb-16'>
          {/* 搜索输入框 */}
          <div>
            <a-input
              v-slots={{
                prefix: () => <i class='iconfont icon-fangdajing text-info text-14'></i>
              }}
              placeholder='请输入考评组名称'
              v-model={[state.pmGroupName, 'value']}
              onInput={searchInput}
            ></a-input>
          </div>
          {/* 批量预览 新增考核表 */}
          <div class='flex items-center gap-x-12'>
            {/* <a-button></a-button> */}
            <a-button type='primary' onClick={() => toAddEvalutaion({})}>
              新增考评组
            </a-button>
          </div>
        </div>
        {/*2. 考核表表格 */}
        <a-table
          loading={loading.value}
          class='custom-table'
          pagination={getPagination({
            getTableData
          })}
          bordered
          dataSource={state.dataSource}
          columns={tableColumns}
          v-slots={{
            bodyCell: ({text, record, index, column}: CBodyCell<Evaluation.TableData>) => {
              switch (column.dataIndex) {
                case 'utils':
                  return (
                    <div class='p-16 flex items-center justify-around'>
                      <i
                        class='text-4xText cursor-pointer iconfont icon-xiugai text-14 hover:text-primary'
                        title='编辑'
                        onClick={() => handleTableEditClick(record)}
                      ></i>
                      {/* <i
                        class='text-4xText cursor-pointer iconfont icon-fuzhi text-14  hover:text-primary'
                        title='复制'
                      ></i> */}
                      <i
                        class='text-4xText cursor-pointer iconfont icon-fenxiang2 text-14  hover:text-primary'
                        title='发起考核'
                        onClick={() => {
                          toInitiateAssessment({
                            pmGroupId: record.pmGroupId,
                            pmGroupName: record.pmGroupName,
                            pmPeriodCode: record.pmPeriodCode
                          })
                        }}
                      ></i>
                      <a-popconfirm
                        title='确认删除此考评组吗'
                        ok-text='是'
                        cancel-text='否'
                        onConfirm={() => {
                          handleTableDelClick(record)
                        }}
                      >
                        <i
                          class='text-4xText cursor-pointer iconfont icon-shanchu text-14  hover:text-primary'
                          title='删除'
                        ></i>
                      </a-popconfirm>
                    </div>
                  )
                default:
                  return (
                    <CnNormalP
                      class='p-16 cursor-pointer text-12'
                      onClick={() => {
                        handleTableEditClick(record)
                      }}
                    >
                      {text}
                    </CnNormalP>
                  )
              }
            }
          }}
        ></a-table>
      </CCard>
    )
  }
})
